<template>
  <el-menu
    class="menu"
    :unique-opened="true"
    :default-active="active">
    <ul class="menu-ul" >
      <el-menu-item :index="itemData.id" v-for="(itemData, index) in menuData"
        :key="index">
        <template slot="title" v-if="itemData.menuType == '1'">
          
            <router-link underline="false" :to="itemData.menuRouter" class="menu-link">
              <i v-if="itemData.menuIcon" class="menu-icon" :class="itemData.menuIcon"></i>
              <span slot="title" @click="changeNav(index,itemData)">{{itemData.menuName}}</span>
              <!-- <i v-if="itemData.menuIcon" class="menu-icon" :class="itemData.menuIcon"></i> -->
              {{itemData.menuName}}
            </router-link>
        </template>

        <template slot="title" v-else>
            <i v-if="itemData.menuIcon" class="menu-icon" :class="itemData.menuIcon"></i>
            <span slot="title" @click="changeNav(index,itemData)">{{itemData.menuName}}</span>
        </template>
      </el-menu-item>
      <!-- <menu-item
        v-for="(item, index) in menuData"
        :key="index"
        :item-data="item"
        :is-collapse="isCollapse">
        
      </menu-item> -->
    </ul>
  </el-menu>
</template>

<script>
import MenuItem from './MenuItem'
export default {
  name: "Menu",
  components: { MenuItem },
  props:{
    isCollapse: Boolean,
  },
  mounted(){
    this.$yAxios({
      url: this.$api.system.queryAuthMenu,
    }, info => {
      console.log()
      this.menuData = info;

      let currentnav = JSON.parse(localStorage.getItem('currentnav'))
      if(currentnav){
        console.log(111)
        info.forEach(item => {
          if(currentnav.menuPid == item.id){
            console.log(item,2223434343)
            this.$bus.$emit('changenav', item.children);
            // console.log(item,222222211112)
            this.active = currentnav.menuPid
          }else{
            // this.active = info[0].id ||
          }
          // console.log(currentnav,4444,this.active)
        })
      }
      // if(currentnav && currentnav.menuPid){

      //   this.active = currentnav.menuPid || ''
      // }



      this.$bus.$emit('redirect', this.firstMenu());
    }, e => {
      this.$bus.$emit('redirect', null);
    })
  },
  data(){
    return {
      menuData: [],
      active: ''
    }
  },
  methods:{
    changeNav(index,row){
      this.$bus.$emit('changenav', row.children);
      // console.log(index,row.children,333)
    },
    //获取menu数据中第一个菜单（可跳转项）
    firstMenu(ary = this.menuData){
      for(let i=0;i<ary.length;i++){
        let item = ary[i];
        if(item.menuRouter && item.menuType === '1') return item;
        else if(item.children) return this.firstMenu(item.children);
      }
      return null
    }
  },
}
</script>

<style scoped lang="less">
@menu-bg: #304156;
@menu-color: #fff;
.el-menu{
  &:not(.el-menu--collapse){
  }
  // height: 100%;
  background: none;
  color: @menu-color;
  position: relative;
  border-right: none;
  .menu-header{
    height: 60px;
    background: @common-color;
    line-height: 60px;
    font-size: 17px;
    font-weight:bold;
    text-align: center;
    white-space: nowrap;
    color: #fff;
    overflow: hidden;
    border-bottom: 1px solid @menu-bg;
  }
  .el-menu--collapse{
    >.el-menu-item{
      text-align: center;
    }
  }
  /deep/ .menu-ul{
    display: flex;
    height: calc(100% - 61px);
    position: relative;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0;
    background: none;
    .el-menu{
      background: @menu-bg;
    }
    .is-opened{
      background:#0d142b;
    }
    .el-icon-arrow-down::before{
      content: '' !important;
    }
    .menu-link{
      color:#fff;
      text-decoration:none;
    }
    >.el-menu-item{
      /* 这段代码是将一级菜单居中对齐的 */
      /*text-align: center;
      padding: 0!important;*/
    }
    .el-menu-item{
      color: inherit;
      i{
        color: inherit;
      }
      &.is-active{
        background: #0d142b;
        color: #fff;
      }
      &:link{
        background: none;
      }
      &:visited{
        background: none;
      }
      &:hover{
        background: @menu-bg;
        >a{
          outline: 0;
          color: #fff;
        }
      }
      >a{
        display: block;
        text-decoration: none;
        color: inherit;
        &.router-link-exact-active{
          outline: 0;
          color: #fff;
        }
      }
    }
    .el-submenu__title{
      text-align: center;
      color: inherit;
      &:hover{
        background: @menu-bg;
        color: #fff;
      }
      >i{
        color: inherit;
      }
    }
    &:not(.el-menu--collapse) .el-submenu__title{
      padding-right: 40px;
      display: flex;
      align-items: center;
    }
    &:not(.el-menu--collapse) i.menu-icon{
      margin-right: 4px;
      font-size: inherit;
    }
  }
}
</style>
